<template>
  <div class="about-wrapper">
    <portal-header :current-index="currentIndex" />
    <div class="about-banner-wrapper w-100 d-flex flex-column flex-ai-c">
      <div class="about-banner-title fs-48 fw-700 d-flex flex-start">平台简介</div>
      <div class="about-banner-desc d-flex flex-jc-sb fs-24" />
    </div>
    <div class="about-sys-info">
      <div class="w-content">
        <div class="general-title w-100 d-flex flex-jc-c">
          <img :src="titleLeft">
          <div class="label fs-30 fw-700">一个中心 三个平台</div>
          <img :src="titleRight">
        </div>
        <div class="sys-info-content d-flex flex-ai-c flex-jc-sb">
          <div class="sys-info-left" />
          <div class="sys-info-right fs-16">
            <p>
              <strong>{{ systemName }}</strong>
            </p>
            <p style="margin-top: 20px;" />
          </div>
        </div>
      </div>
    </div>
    <div class="about-sys-module">
      <div class="w-content">
        <div class="general-title w-100 d-flex flex-jc-c">
          <img :src="titleLeft">
          <div class="label fs-30 fw-700">平台功能特色</div>
          <img :src="titleRight">
        </div>
        <div class="sys-module-content d-flex flex-jc-sb flex-wrap">
          <div class="module-1">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">权威认证</div>
              <div class="module-line" />
              <div class="module-desc fs-16"> 服务过程可视化监管</div>
            </div>
          </div>
          <div class="module-2">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">分类精准</div>
              <div class="module-line" />
              <div class="module-desc fs-16"> 一键搜索实现精准筛选</div>
            </div>
          </div>
          <div class="module-3">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">信息详实</div>
              <div class="module-line" />
              <div class="module-desc fs-16">基本信息、个人技能、证件证书、 工作经历、个人评价等真实全面</div>
            </div>
          </div>
          <div class="module-4">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">互评机制</div>
              <div class="module-line" />
              <div class="module-desc fs-16">多维度、多阶段互评，让服务更加 透明，让互动更加生动</div>
            </div>
          </div>
          <div class="module-5">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">诚信溯源</div>
              <div class="module-line" />
              <div class="module-desc fs-16">以信用评价为基础，建立追溯体系，让信任变得可见</div>
            </div>
          </div>
          <div class="module-6">
            <div class="module-text">
              <div class="module-title fw-700 fs-20">智能推荐</div>
              <div class="module-line" />
              <div class="module-desc fs-16">经验、学历、价格多重筛选， 通过准确匹配实现供需高效对接</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <portal-footer />
  </div>
</template>

<script>
import PortalHeader from './components/PortalHeader'
import PortalFooter from './components/PortalFooter'
import { title } from '@/settings'

export default {
  name: 'PortalAbout',
  components: {
    PortalHeader,
    PortalFooter
  },
  data() {
    return {
      currentIndex: 5,
      categoryName: '关于平台',
      systemName: title,
      titleLeft: require('@/assets/portal_images/title_left.png'),
      titleRight: require('@/assets/portal_images/title_right.png'),
      qrCodeImg: require('@/assets/portal_images/qr_code.png')
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/portal/common.scss';
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.about-banner-wrapper {
  width: 100%;
  height: 271px;
  padding-top: 80px;
  margin: 0 auto;
  background-image: url('~@/assets/portal_images/about/about_banner_bg.jpg');

  .about-banner-title {
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: $portalWhiteColor;
  }

  .about-banner-desc {
    margin-top: 16px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    color: $portalWhiteColor;
  }
}

.about-sys-info {
  height: 600px;
  padding: 64px 0;
  background-image: url('~@/assets/portal_images/about/about_sys_info_bg.png');
  background-size: 100% 100%;

  .general-title {
    height: 40px;

    .label {
      margin: 0 32px;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .sys-info-content {
    margin-top: 64px;
    height: 400px;

    .sys-info-left {
      width: 535px;
      height: 391px;
      //background-image: url('~@/assets/portal_images/about/about_sys.png');
    }

    .sys-info-right {
      width: 623px;
      height: 400px;
      line-height: 32px;
      color: #222222;
    }
  }
}

.about-sys-module {
  height: 592px;
  padding: 64px 0;
  background-image: url('~@/assets/portal_images/about/about_sys_module_bg.png');

  .general-title {
    height: 40px;

    .label {
      margin: 0 32px;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .sys-module-content {
    margin-top: 56px;

    .module-1 {
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_1.png');
    }

    .module-2 {
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_2.png');
    }

    .module-3 {
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_3.png');
    }

    .module-4 {
      margin-top: 24px;
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_4.png');
    }

    .module-5 {
      margin-top: 24px;
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_5.png');
    }

    .module-6 {
      margin-top: 24px;
      width: 384px;
      height: 174px;
      background-image: url('~@/assets/portal_images/about/about_sys_module_6.png');
    }

    .module-text {
      margin-left: 24px;
      margin-top: 39px;
      color: $portalWhiteColor;

      .module-title {
        height: 26px;
        line-height: 26px;
      }

      .module-line {
        margin: 8px 0;
        width: 24px;
        height: 2px;
        background: #FFFFFF;
      }

      .module-desc {
        height: 52px;
        line-height: 26px;
        width: 240px;
      }
    }
  }
}

.about-contract {
  height: 200px;
  background-image: url('~@/assets/portal_images/about/contract_bg.png');
  background-position: 50% 0;
  background-color: #F5F7FA;

  .qr-code-wrapper1 {
    background-image: url('~@/assets/portal_images/qr_code.png');
    width: 138px;
    height: 138px;
    background-size: 100% 100%;
    position: absolute;
    top: 12px;
    border-radius: 30px;
    left: 880px;
  }

  .qr-code-label1 {
    position: absolute;
    width: 138px;
    text-align: center;
    top: 165px;
    left: 880px;
    height: 21px;
  }

  .qr-code-label2 {
    position: absolute;
    width: 138px;
    height: 21px;
    text-align: center;
    top: 165px;
    left: 1050px;
  }

  .qr-code-wrapper2 {
    background-image: url('~@/assets/portal_images/qr_code.png');
    width: 138px;
    height: 138px;
    background-size: 100% 100%;
    position: absolute;
    top: 12px;
    border-radius: 30px;
    left: 1050px;
  }

  .contract-text {
    padding-top: 50px
  }

  .contract-label {
  }

  .contract-data {
    margin-top: 32px;
  }
}
</style>
